<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
// 默认暴露
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷",
      address: "北京昌平",
    };
  },
  methods: {
    showName() {
      alert(this.name);
    },
  },
};

// Vue.extends创建组件
// school 组件实例对象
// const school = Vue.extends({
//   name: "School",
//   data() {
//     return {
//       name: "尚硅谷",
//       address: "北京昌平",
//     };
//   },
//   methods: {
//     showName() {
//       alert(this.name);
//     },
//   },
// });

// export default school;
</script>

<style>
.demo {
  background-color: orange;
}
</style>